<template>
    <div class="operatitle"></div>
    <div class="complabox">
        <div class="operitem" v-for="item in list" :key="item.name">
            <img src="../../../assets/mahjong/icon29.png" alt="">
            <div class="operitem-r">
                <span class="span1">{{ item.name }}</span>
                <span class="span2 setColor">{{ item.num1 }}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{ item.num2 }}%</span>
            </div>
        </div>
    </div>
    <!-- 下面是另外一部分 -->
    <div class="combottomtitle"></div>
    <div class="combottombox">
        <div class="left">
            <div class="box">
                <img src="../../../assets/fengjie/icon34.png" alt="">
                <e-charts style="width: 250px;height: 250px;" id="echarts" ref="chart" :option="echartOption"></e-charts>
            </div>
        </div>
        <div class="right">
            <div class="item" v-for="(item, index) in echartTitleList" :key="item.name">
                <div class="i-left">
                    <div class="ik" :class="'ik' + (index + 1)"></div>
                    <span>{{ item.name }}</span>
                </div>
                <div class="i-right" :class="'i-color' + (index + 1)">{{ item.num1 }}</div>
                <div class="i-right" :class="'i-color' + (index + 1)">{{ item.num2 }}%</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

let list = ref([
    { name: '12345投诉', num1: 323, num2: 20},
    { name: '12369投诉', num1: 323, num2: 20},
    { name: '110接报警', num1: 323, num2: 20},
    { name: '社区信箱举报', num1: 323, num2: 20},
    { name: '网络舆情（微博、抖音等）', num1: 323, num2: 20 }
])



// 配置项
let echartOption = ref({});
let echartTitleList = ref([
    { name: '聚众赌博', num1: 726, num2: 44.95 },
    { name: '打架斗殴', num1: 220, num2: 30 },
    { name: '矛盾纠纷', num1: 300, num2: 30 },
    { name: '经营风险', num1: 50, num2: 30 },
    { name: '信访投诉', num1: 90, num2: 30 },
    { name: '吸毒', num1: 20, num2: 20 },
]);
// 初始化echarts
function initEcharts() {
    echartOption.value = {
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                padAngle: 5,
                label: {
                    show: false,
                    position: 'center'
                },
                data: [
                    {
                        value: 726, name: 'Email', itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 1,
                                [
                                    { offset: 0, color: 'rgba(252, 102, 79, .1)' },
                                    { offset: 1, color: 'rgba(252, 102, 79, 1)' },
                                ]
                            )
                        }
                    },
                    {
                        value: 220, name: 'Union Ads', itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 1,
                                [
                                    { offset: 0, color: 'rgba(5, 207, 247, .1)' },
                                    { offset: 1, color: 'rgba(5, 207, 247, 1)' },
                                ]
                            )
                        }
                    },
                    {
                        value: 300, name: 'Search Engine', itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 1,
                                [
                                    { offset: 0, color: 'rgba(25, 120, 229, .1)' },
                                    { offset: 1, color: 'rgba(25, 120, 229, 1)' },
                                ]
                            )
                        }
                    },
                    {
                        value: 50, name: 'Email', itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 1,
                                [
                                    { offset: 0, color: 'rgba(234, 185, 102, .1)' },
                                    { offset: 1, color: 'rgba(234, 185, 102, 1)' },
                                ]
                            )
                        }
                    },
                    {
                        value: 90, name: 'Union Ads', itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 1,
                                [
                                    { offset: 0, color: 'rgba(96, 180, 94, .1)' },
                                    { offset: 1, color: 'rgba(96, 180, 94, 1)' },
                                ]
                            )
                        }
                    },
                    {
                        value: 20, name: 'Search Engine', itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 1,
                                [
                                    { offset: 0, color: 'rgba(190, 205, 208, .1)' },
                                    { offset: 1, color: 'rgba(190, 205, 208, 1)' },
                                ]
                            )
                        }
                    },
                ]
            }
        ]
    }
}
onMounted(() => {
    initEcharts();
});
</script>

<style lang="less" scoped>
.operatitle {
    width: 100%;
    height: 36px;
    margin-top: 9px;
    background-image: url("../../../assets/mahjong/icon26.png");
    background-size: 100% 100%;
    margin-bottom: 4px;
}

.complabox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .operitem:last-child {
        width: 100%;
    }

    .operitem {
        width: 48%;
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            width: 32px;
            height: 32px;
            margin-right: 4px;
        }

        .operitem-r {
            flex: 1;
            height: 32px;
            background-image: url("../../../assets/mahjong/icon19.png");
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 0 16px 0 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .span1 {
                font-size: 12px;
                color: #FFFFFF;
            }

            .span2 {
                font-family: AlimamaShuHeiTi-Bold;
                font-weight: bold;
                font-size: 16px;
                color: #FFFFFF;
            }
        }
    }
}

.combottomtitle {
    width: 100%;
    height: 36px;
    margin-top: 9px;
    background-image: url("../../../assets/mahjong/icon25.png");
    background-size: 100% 100%;
    margin-bottom: 4px;
}

.combottombox {
    width: 85%;
    height: 250px;
    margin-top: 9px;
    background-image: url("../../../assets/mahjong/icon27.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .left {
        width: 210px;
        height: 210px;
        display: flex;
        align-items: center;
        background-image: url('../../../assets/icon7.png');
        background-size: 100% 100%;

        .box {
            width: 210px;
            height: 210px;
            position: relative;

            img {
                width: 90px;
                height: 90px;
                position: absolute;
                left: calc(50% - 45px);
                top: calc(50% - 45px);
            }

            #echarts {
                width: 250px;
                height: 250px;
                position: absolute;
                left: -20px;
                top: -20px;
            }
        }
    }

    .right {
        width: 150px;
        margin-left: 40px;

        .item {
            width: 250px;
            height: 30px;
            background-image: url('../../../assets/icon11.png');
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 7px 0;
            box-sizing: border-box;
            padding: 0 0 0 10px;

            .i-left {
                display: flex;
                align-items: center;

                .ik {
                    width: 8px;
                    height: 8px;
                }

                .ik1 {
                    background: #FC664F;
                }

                .ik2 {
                    background: #05CFF7;
                }

                .ik3 {
                    background: #1978E5;
                }

                .ik4 {
                    background: #EAB966;
                }

                .ik5 {
                    background: #60B45E;
                }

                .ik6 {
                    background: #BECDD0;
                }

                span {
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    font-size: 12.88px;
                    color: #FFFFFF;
                    margin-left: 11px;
                }
            }

            .i-right {
                font-family: PingFangSC-Regular;
                font-weight: 400;
                font-size: 14px;
            }

            .i-color1 {
                color: #FC664F;
            }

            .i-color2 {
                color: #05CFF7;
            }

            .i-color3 {
                color: #1978E5;
            }

            .i-color4 {
                color: #EAB966;
            }

            .i-color5 {
                color: #60B45E;
            }

            .i-color6 {
                color: #BECDD0;
            }
        }
    }
}
</style>
